<template>
	<div>
    <el-form :inline="true" class="search-form" label-width="100px" size="medium" >
      <el-form-item label="所属市场：">
        <el-select v-model="res.params.marketId" @change="marketChange" placeholder="请选择市场" clearable >
          <el-option v-for="option in $store.state.common.marketOptions" :key="option.marketId" :value="option.marketId" :label="option.marketName" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商户名称：">
        <el-select v-model="res.params.shopId" placeholder="请选择商户" clearable >
          <el-option v-for="option in res.shopOptions" :key="option.shopId" :value="option.shopId" :label="option.shopName" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商户负责人：">
        <el-input placeholder="请输入商户负责人" ></el-input>
      </el-form-item>
      <el-form-item label="商户电话：">
        <el-input placeholder="请输入商户电话" ></el-input>
      </el-form-item>
      <el-form-item label="检测师姓名：">
        <el-input placeholder="请输入检测师姓名" ></el-input>
      </el-form-item>
      <el-form-item label="检测师电话：">
        <el-input placeholder="请输入检测师电话" ></el-input>
      </el-form-item>
      <el-form-item label="派单编号：">
        <el-input placeholder="请输入派单编号" ></el-input>
      </el-form-item>
      <el-form-item label="申请时间：">
        <el-date-picker
          v-model="res.params.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态：">
        <el-select v-model="res.params.detectionState" placeholder="请选择状态" clearable >
          <el-option v-for="option in new Array({name: '发起', id: 0},{name: '已派单', id: 1},{name: '已审核', id: 2},{name: '总部审核', id: 3})" :key="option.id" :value="option.id" :label="option.name" ></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item >
        <el-button type="primary" size="medium" icon="el-icon-search" @click="searchClick" >查询</el-button>
      </el-form-item>
    </el-form>
		<el-table :data="res.tableOptions" size="medium" border stripe class="imp-table" v-loading="res.loading">
			<el-table-column label="首图" width="170">
				<template slot-scope="scope">
					<img :src="imageUrl + scope.row.car.carImageUrl + '.r_150xh_100'" onerror="javascript:this.src='static/images/default.svg';">
				</template>
			</el-table-column>
			<el-table-column label="车辆信息"  prop="car.carTitle">
         <template slot-scope="scope">
          <h4 class="hover" @click="info(scope.row)">{{scope.row.car.carTitle || '暂无标题'}}</h4>
          <span>{{'公司名称：'+scope.row.user.shop.shopName}}</span>
          <p>{{'联系方式：'+scope.row.user.shop.shopMobile}}</p>
        </template>
      </el-table-column>
      <el-table-column label="商户信息"  prop="car.carTitle">
         <template slot-scope="scope">
          <span>{{'商户名称：'+scope.row.car.shop.shopName}}</span>
          <p>{{'联系方式：'+scope.row.car.shop.shopMobile}}</p>
        </template>
      </el-table-column>
			<el-table-column label="检测师信息"  prop="carRfid">
				<template slot-scope="scope">
          <div v-if="scope.row.detectionState >= 10">
            <span>{{'检测师名称：'+scope.row.user.userName}}</span>
            <p>{{'检测师联系方式：'+scope.row.user.userMobile}}</p>
          </div>
          <div v-else>
            <el-tag type="info">未派单</el-tag>
          </div>
				</template>
			</el-table-column>
      <el-table-column label="派单编号" prop="detectionNo" width="170"  align="center">
      </el-table-column>
			<el-table-column label="状态" width="100"  align="center">
        <template slot-scope="scope">
          <el-tag :type="successObj[scope.row.detectionState]">{{scope.row.detectionState | filterCarDetect}}</el-tag>
				</template>
      </el-table-column>
			<el-table-column label="操作" width="220"  align="center" >
				<template slot-scope="scope"  >
          <el-button size="small" type="primary" @click="info(scope.row)">查看详情</el-button>			        
          <el-button size="small" v-if="scope.row.detectionState == 0" @click.native="edit(scope.row)">派单</el-button>			        
          <el-button size="small" v-if="scope.row.detectionState == 10" @click.native="editUser(scope.row)">更改检测师</el-button>			        
          <!-- <el-dropdown trigger="click" v-if="scope.row.detectionState <= 10" >
            <el-button size="mini">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="scope.row.detectionState == 0" @click.native="edit(scope.row)">派单</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.detectionState == 10" @click.native="cancel(scope.row)">取消派单</el-dropdown-item>
              <el-dropdown-item v-if="scope.row.detectionState == 10" @click.native="editUser(scope.row)">更改检测师</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
        </template>
			</el-table-column>
		</el-table>
		<div class="footer">
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="res.params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.pageTotal">
			</el-pagination>
		</div>
    <editTesting :params="params" v-if="params.editShow" @reset="reset" />
    <infoTesting :params="params2" v-if="params2.infoShow" />
	</div>
</template>
<script>

import editTesting from './editTesting'
import infoTesting from './infoTesting'
import { mapMutations } from 'vuex'

export default {
  components: {
    editTesting, infoTesting
  },
  data () {
    return {
      successObj: {
        0: '',
        10: 'warning',
        20: 'success'
      },
      imageUrl: window.imageUrl,
      res: {
        marketOptions: [],
        tableOptions: [],
        shopOptions: [],
        params: {
          marketId: this.$marketId,
          pageIndex: 1,
          pageSize: 10,
          shopId: '',
          detectionState: '',
          date: []
        },
        loading: false,
        pageTotal: 0
      },
      params: {
        editShow: false,
        editUser: false,
        obj: {}
      },
      params2: {
        infoShow: false
      }
    }
  },
  created () {
    this.querySubmit()
    this.getMarketOptions({})
    this.marketChange()
  },
  methods: {
    ...mapMutations([
      'getMarketOptions',
      'getShopOptions'
    ]),
    marketChange () {
      this.res.params.shopId = ''
      this.getShopOptions(this.res)
    },
    searchClick () {
      this.querySubmit()
    },
    querySubmit () {
      this.res.loading = true
      let ax = this.getQueryAll()
      this.$axios.all([ax.next().value, ax.next().value]).then(this.$axios.spread((acct, prems) => {
        this.res.loading = false
        this.res.tableOptions = acct.data.result
        this.res.pageTotal = prems.data.result.total
      }))
    },
    handleSizeChange (val) {
      this.res.params.pageSize = val
      this.querySubmit()
    },
    getQueryAll: function* () {
      yield this.$axios.get(this.$api.getDetectionList, {params: this.res.params})
      return this.$axios.get(this.$api.getDetectionListNum, {params: {marketId: this.res.params.marketId}})
    },
    handleCurrentChange (val) {
      this.res.params.pageIndex = val
      this.querySubmit()
    },
    // 派单操作
    edit (obj) {
      this.params.editUser = false
      this.params.obj = obj
      this.params.editShow = true
    },
    info (obj) {
      this.params2.obj = obj
      this.params2.infoShow = true
    },
    // 修改成功重新请求
    reset () {
      this.params.editShow = false
      this.querySubmit()
    },
    // 取消派单
    cancel (par) {
      this.$confirm('是否取消派单', '提示', {
        confirmButtonText: '取消派单',
        cancelButtonText: '关闭',
        type: 'warning'
      }).then(() => {
        // this.$axios.get(this.$api.updateDetection, {
        //   params: {
        //     detectionId: par.detectionId,
        //     // marketId: this.$marketId,
        //     carId: par.car.carId,
        //     detectionState: 0
        //   }
        // }).then(res => {
        //   if (res && res.data.code === 1) {
        //     this.$message({
        //       type: 'success',
        //       message: '取消派单成功'
        //     })
        //     par.detectionState = 0
        //   }
        // })
        // this.$message({message: '正在完善该功能'})
      }).catch(() => {
        this.$message({message: '已关闭'})
      })
    },
    // 更改检测师
    editUser (par) {
      this.params.editUser = true
      this.params.obj = par
      this.params.editShow = true
    }
  }
}
</script>
<style scoped>
  .hover:hover{
    cursor: pointer;
    color: #2990C4;
  }
</style>
